const fs = require("fs");
const path = require("path");

// 路径拼接错误问题解决:
//  ./ ../相对路径=>完整的文件存放路径"E:\\test\\7.my\\js\\node\\input.txt"
// __dirname 当前文件所处目录
// path.join()  路径拼接
console.log(path.join("/a", "/b/c", "../", "./d"));
console.log(path.join(__dirname, "/input.txt"));
// fs.readFile(path.join(__dirname,'/input.txt'), "utf-8", (err, data) => {
//   if (err) {
//     console.error(err.message);
//     return;
//   }
//   console.log(data);
// });

// path.basename(path,[,'去除的扩展名'])     ->路径最后名
// path.extname(path)                        ->文件扩展名
const url = "./../../vue/vue2/html-vue/index.html";
console.log(path.basename(path.join(__dirname, url), path.extname(url)));

// 将html文件拆分css,js,html 并且外链
console.log("========练习=============");

fs.readFile(path.join(__dirname, "./拆分.html"), "utf8", function (err, data) {
  if (err) {
    console.log(err);
    return;
  }
  resolve(data);
});
function resolve(data) {
  let cssReg = /<style>[\s\S]*<\/style>/g;
  let jsReg = /<script>[\s\S]*<\/script>/g;
  let htmlStr = data.toString();
  // 提取css和js
  const cssStr = cssReg.exec(htmlStr);
  const jsStr = jsReg.exec(htmlStr);
  const newCssStr = cssStr[0].replace("<style>", "").replace("</style>", "");
  const newJsStr = jsStr[0].replace("<script>", "").replace("</script>", "");

  // 新建文件
  // 1.fs.writeFile覆盖,2.必须存在文件夹,
  fs.writeFile(path.join(__dirname, "./newCss.css"), newCssStr, function (err) {
    if (err) {
      console.log("写入样式 失败");
      return;
    }
    console.log("写入样式成功");
  });
  fs.writeFile(path.join(__dirname, "./newJs.js"), newJsStr, function (err) {
    if (err) {
      console.log("写入js 失败");
      return;
    }
    console.log("写入js成功");
  });

  // 将原html文件中的css和js改成外链
  const newHtmlStr = htmlStr
    .replace(
      /<style>[\s\S]*<\/style>/g,
      `<link rel="stylesheet" href="./newCss.css">`
    )
    .replace(
      /<script>[\s\S]*<\/script>/g,
      '<script src="./newJs.js"></script>'
    );

  fs.writeFile(
    path.join(__dirname, "./newHtml.html"),
    newHtmlStr,
    function (err) {
      if (err) {
        console.log("写入html 失败");
        return;
      }
      console.log("写入html 成功");
    }
  );
}
